<template>
  <div class="drawer-main">
    <el-drawer
      ref="drawerMain"
      :title="drawerTitle"
      :visible.sync="drawer"
      direction="rtl"
      size="35%"
      :wrapperClosable="false"
      @closed="handleClose"
    >
      <div class="drawer-content">
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            prop="cabinetName"
            :label="$t('cabinet.cabinetName')"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="cabinetCode"
            :label="$t('cabinet.cabinetCode')"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="cabinetSite"
            :label="$t('cabinet.cabinetArea')"
          >
          </el-table-column>
          <el-table-column
            prop="cabinetTypeStr"
            :label="$t('cabinet.cabinetType')"
          >
          </el-table-column>
        </el-table>
        <el-form
          :model="dataForm"
          :rules="rules"
          ref="accreditRuleForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="$i18n.t('cabinet.accreditLabel1')"
            prop="roleCode"
          >
            <el-select
              v-model="dataForm.roleCode"
              multiple
              :placeholder="`${$i18n.t('common.select')}${$i18n.t('cabinet.accreditRole')}`"
              class="accredit-select"
            >
              <el-option
                v-for="item in roleData"
                :key="item.roleCode"
                :label="item.roleCodeName"
                :value="item.roleCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="clearDialog">{{
            $t("common.cancel")
          }}</el-button>
          <el-button
            type="primary"
            @click="submitInfo"
          >{{
            $t("common.submit")
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getRoleList, setRole } from '@/api/cabinet/accredit'
import { getAllList } from '@/api/cabinet/cabinet/index.js'

export default {
  data() {
    return {
      drawer: false,
      tableData: [],
      actionType: 1,
      dataForm: {
        cabinetSiteId: '',
        cabinetSite: '',
        roleCode: []
      },
      rules: {
        roleCode: [{ required: true, message: `${$i18n.t('common.select')}${$i18n.t('cabinet.accreditRole')}`, trigger: 'blur' }]
      },
      roleData: []
    }
  },
  computed: {
    drawerTitle() {
      let text = this.actionType == 2 ? this.$i18n.t('cabinet.accreditBatch') : this.$i18n.t('cabinet.accredit')
      return text
    }
  },
  methods: {
    getCabinetData(cabinetSiteId) {
      getAllList({ cabinetSiteId }).then(res => {
        this.tableData = res.data.result || []
      })
    },
    getRoleData(cabinetSiteId, cabinetSite) {
      this.dataForm.cabinetSiteId = cabinetSiteId
      this.dataForm.cabinetSite = cabinetSite
      getRoleList({ cabinetSiteId }).then(res => {
        if (res.data.success) {
          this.roleData = res.data.result || []
          let ids = []
          this.roleData.forEach(ele => {
            if (!!ele.cabinetSiteId) {
              ids.push(ele.roleCode)
            }
          })
          this.dataForm.roleCode = ids
          console.log(this.dataForm.roleCode)
        }
      })
    },
    submitInfo() {
      this.$refs.accreditRuleForm.validate(valid => {
        if (valid) {
          let params = {
            roleCode: this.dataForm.roleCode.join(','),
            cabinetSiteId: this.dataForm.cabinetSiteId,
            cabinetSite: this.dataForm.cabinetSite
          }
          setRole(params).then(res => {
            if (res.data.success) {
              this.$message.success($i18n.t('common.operateSuccess'))
              this.drawer = false
              this.$emit('refresh')
            }
          })
        }
      })
    },
    clearDialog() {
      this.drawer = false
    },
    handleClose() {
      this.dataForm.roleCode = []
      this.$refs.accreditRuleForm.clearValidate()
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-main {
  /deep/.el-drawer__body {
    padding: 0 10px;
  }
  /deep/ .ele-form-search {
    height: auto !important;
  }
  .demo-ruleForm {
    margin-top: 20px;
    padding-bottom: 20px;
    .accredit-select {
      width: 100%;
    }
  }
  .dialog-footer {
    padding-bottom: 16px;
  }
}
</style>